<template>
  <!--详情界面-->
  <el-dialog v-loading.fullscreen.lock="loading" element-loading-text="处理中......" title="险种详情"
             :visible.sync="dialogVisible" size="large" :close-on-click-modal="false" :close-on-press-escape="false"
             :before-close="off" :top="dialog_margin_top">
    <el-form label-width="150px">
      <el-row :span="24">
        <el-col :span="8">
          <el-form-item label="险种代码">
            <el-input v-model="formData.riskcode" size="small" disabled></el-input>
          </el-form-item>
          <el-form-item label="险种版本">
            <el-input v-model="formData.riskversion" size="small" disabled></el-input>
          </el-form-item>
          <el-form-item label="险种中文名称" disabled>
            <el-input v-model="formData.riskcname" size="small" disabled></el-input>
          </el-form-item>
          <el-form-item label="险种英文名称" disabled>
            <el-input v-model="formData.riskename" size="small" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="危险单位划分方式">
            <el-select v-model="formData.dangerSplitMode" size="small" disabled>
              <el-option v-for="item in dangerSplitModeOptions" :key="item.value" :label="item.value + '-'+ item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="危险单位展示方式">
            <el-select v-model="formData.dangerViewType" size="small" disabled>
              <el-option v-for="item in dangerViewTypeOptions" :key="item.value" :label="item.value + '-'+ item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="试算方式">
            <el-select v-model="formData.reinsTrialMode" size="small" disabled>
              <el-option v-for="item in reinsTrialModeOptions" :key="item.value" :label="item.value + '-'+ item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="风险评估方式">
            <el-select v-model="formData.riskEvaluateMode" size="small" disabled>
              <el-option v-for="item in riskEvaluateModeOptions" :key="item.value" :label="item.value + '-'+ item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="风险累积方式" required>
            <el-select v-model="formData.riskPoolMode" size="small" disabled>
              <el-option v-for="item in riskPoolModeOptions" :key="item.value" :label="item.value + '-'+ item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否组合险">
            <el-select v-model="formData.compositeflag" placeholder="是否组合险" size="small" disabled>
              <el-option v-for="item in compositeOptions" :key="item.value" :label="item.value + '-'+ item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="有效标识" required>
            <el-select v-model="formData.validstatus" size="small" disabled>
              <el-option v-for="item in validOptions" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="险种标识">
            <el-input v-model="formData.riskflag" size="small" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <v-table
      is-horizontal-resize
      style="width:100%"
      :columns="fhColumns"
      :table-data="formData.fhData"
      row-hover-color="#eee"
      row-click-color="#edf7ff"
    ></v-table>
    <br>
    <v-table
      is-horizontal-resize
      style="width:100%"
      :columns="fhxColumns"
      :table-data="formData.fhxData"
      row-hover-color="#eee"
      row-click-color="#edf7ff"
    ></v-table>
    <br>
		  <span slot="footer" class="dialog-footer">
			   <el-button @click="off">关 闭</el-button>
		  </span>
  </el-dialog>
</template>

<script>
  import RiskAPI from "../../../../js/production/risk/riskAPI"
  import Vue from 'vue'
  export default {
    data() {
      return {
        dialog_margin_top: '5%',
        dialogVisible: true,
        formData: {
          riskcode: '',
          classcode: '',
          riskversion: '1.0',
          riskcname: '',
          riskename: '',
          effectivestartdate: null,
          invalidenddate: null,
          compositeflag: '',
          validstatus: '1',
          riskflag:'',
          dangerSplitMode: '',
          dangerViewType: '0',
          reinsTrialMode: '0',
          riskEvaluateMode: '0',
          riskPoolMode: '0',
          fhData: [],
          fhxData: [],
        },
        validOptions: [
          {label: '1-有效', value: '1'},
          {label: '0-无效', value: '0'}
        ],
        compositeOptions: [
          {label: '是', value: '1'},
          {label: '否', value: '0'}
        ],
        versionOptions: [],
        loading: false,
        dangerSplitModeOptions: [
          {label: '按单', value: '0'},
          {label: '按地址', value: '1'},
          {label: '按人', value: '2'},
          {label: '按组合险', value: '3'},
          {label: '按保单（货运险大保单）', value: '4'},
          {label: '按险种（通用产品）', value: '5'},
          {label: '按职业和方案号', value: '6'},
        ],
        dangerViewTypeOptions: [
          {label: '默认', value: '0'},
          {label: '团单方式', value: '1'},
          {label: '责任险和工程险（含有PML值的）', value: '2'},
        ],
        reinsTrialModeOptions: [
          {label: '默认', value: '0'},
          {label: '意健险方式', value: '1'},
        ],
        riskEvaluateModeOptions: [
          {label: '默认', value: '0'},
          {label: '按险种、业务年', value: '1'},
          {label: '按险种、业务年、工种等级', value: '2'},
        ],
        riskPoolModeOptions: [
          {label: '默认', value: '0'},
          {label: '按风险地址累积（财产险）', value: '1'},
          {label: '按船、飞机累积（货运险）', value: '2'},
          {label: '按证件号（身份证或其他证件）（意建险）', value: '3'},
          {label: '按地址（安装工程险 只累积物质损失部分）', value: '4'},
          {label: '按地址（险种内部累积）', value: '5'},
        ],
        inrateflagOptions: [
          {label: '不使用', value: '0'},
          {label: '使用', value: '1'},
        ],
        fhColumns: [
          {
            field: 'serialno', title:'序号', width: 50, titleAlign: 'center', columnAlign: 'center',
            formatter: function (rowData,rowIndex,pagingIndex,field) {
              return rowIndex + 1
            }, isFrozen: true,isResize:true
          },
          {field: 'fhtreaty', title: '适用合约',width: 100, titleAlign: 'center',columnAlign:'center',componentName:'fhtreaty-select-view',isResize:true},
          {field: 'fhsection', title:'合约节', width: 80, titleAlign: 'center',columnAlign:'center',componentName:'fhsection-select-view',isResize:true},
          {field: 'fhexitemkind', title: '合约除外责任条件', width: 150, titleAlign: 'center',columnAlign:'center',componentName:'fhexitemkind-input-view',isResize:true},
          {field: 'inrateflag', title: '分入比例规则', width: 150, titleAlign: 'center',columnAlign:'center',componentName:'inrateflag-select-view',isResize:true},
        ],
        fhxColumns: [
          {
            field: 'serialno', title:'序号', width: 50, titleAlign: 'center', columnAlign: 'center',
            formatter: function (rowData,rowIndex,pagingIndex,field) {
              return rowIndex + 1
            }, isFrozen: true,isResize:true
          },
          {field: 'fhxtreaty', title: '适用超赔合约',width: 100, titleAlign: 'center',columnAlign:'center',componentName:'fhxtreaty-select-view',isResize:true},
          {field: 'fhxlayer', title: '超赔合约层', width: 150, titleAlign: 'center',columnAlign:'center',componentName:'fhxlayer-select-view',isResize:true},
          {field: 'fhxsection', title:'超赔合约节', width: 80, titleAlign: 'center',columnAlign:'center',componentName:'fhxsection-select-view',isResize:true},
        ],
        fhtreatyOptions: [],
        fhsectionOptions: [],
        fhexitemkindOptions: [],
        fhxtreatyOptions: [],
        fhxlayerOptions: [],
        fhxsectionOptions: [],
      }
    },
    mounted() {
      this.formData = Object.assign({}, this.$parent.rowDetail);

      this.formData.fhData = [];
      this.formData.fhxData = [];

      RiskAPI.queryFdriskconfigByRisk(this);
      RiskAPI.queryFhriskByRisk(this);
      RiskAPI.queryFhexitemkindByRisk(this);
      RiskAPI.queryFhxriskByRisk(this);

      RiskAPI.initFhtreatyOptions(this);
      for (let i = 0; i < this.formData.fhData.length; i++) {
        RiskAPI.initFhsectionOptions(this, i);
        this.formData.fhData[i].fhsectionOptions = this.fhsectionOptions;
      }
      RiskAPI.initFhxtreatyOptions(this);
      for (let i = 0; i < this.formData.fhxData.length; i++) {
        RiskAPI.initFhxlayerOptions(this, i);
        this.formData.fhxData[i].fhxlayerOptions = this.fhxlayerOptions;
      }
      for (let i = 0; i < this.formData.fhxData.length; i++) {
        RiskAPI.initFhxsectionOptions(this, i);
        this.formData.fhxData[i].fhxsectionOptions = this.fhxsectionOptions;
      }

    },
    methods: {
      off() {
        this.$parent.showDetailDialog = false;
      },
    }
  }


  // fh自定义列组件
  Vue.component('fhtreaty-select-view',{
    template:`<el-select v-model="rowData.fhtreaty" filterable size="small" @change="select" disabled>
                  <el-option v-for="item in rowData.fhtreatyOptions"
                             :key="item.value"
                             :label="item.value + '-'+ item.label"
                             :value="item.value">
                  </el-option>
              </el-select>`,
    props:{
      rowData:{
        type:Object
      },
      field:{
        type:String
      },
      index:{
        type:Number
      },
    },
    methods:{
      select(){
        // 参数根据业务场景随意构造
        let params = {type:'selectFhtreaty',index:this.index,rowData:this.rowData,tmpVal:this.rowData.fhtreaty};
        this.$emit('on-custom-comp',params);
      },
    }
  })

  Vue.component('fhsection-select-view',{
    template:`<el-select v-model="rowData.fhsection" filterable size="small" @change="select" disabled>
                  <el-option v-for="item in rowData.fhsectionOptions" :key="item.value" :label="item.value + '-'+ item.label"
                             :value="item.value"></el-option>
                </el-select>`,
    props:{
      rowData:{
        type:Object
      },
      field:{
        type:String
      },
      index:{
        type:Number
      },
    },
    methods:{
      select(){
        // 参数根据业务场景随意构造
        let params = {type:'selectFhsection',index:this.index,rowData:this.rowData,tmpVal:this.rowData.fhsection};
        this.$emit('on-custom-comp',params);
      },
    }
  })

  Vue.component('fhexitemkind-input-view',{
    template:`<el-input v-model="rowData.fhexitemkind" :title="rowData.fhexitemkind" size="small" disabled @click.native="select"></el-input>`,
    props:{
      rowData:{
        type:Object
      },
      field:{
        type:String
      },
      index:{
        type:Number
      },
    },
    methods:{
      select(){
        // 参数根据业务场景随意构造
        let params = {type:'selectFhexitemkind',index:this.index,rowData:this.rowData,tmpVal:this.rowData.fhexitemkind};
        this.$emit('on-custom-comp',params);
      },
    }
  })

  Vue.component('inrateflag-select-view',{
    template:`<el-select v-model="rowData.inrateflag" size="small" @change="select" disabled>
                  <el-option v-for="item in rowData.inrateflagOptions" :key="item.value" :label="item.value + '-'+ item.label"
                             :value="item.value"></el-option>
                </el-select>`,
    props:{
      rowData:{
        type:Object
      },
      field:{
        type:String
      },
      index:{
        type:Number
      },
    },
    methods:{
      select(){
        // 参数根据业务场景随意构造
        let params = {type:'selectInrateFlag',index:this.index,rowData:this.rowData,tmpVal:this.rowData.inrateflag};
        this.$emit('on-custom-comp',params);
      },
    }
  })

  // fhx自定义列组件
  Vue.component('fhxtreaty-select-view',{
    template:`<el-select v-model="rowData.fhxtreaty" filterable size="small" @change="select" disabled>
                  <el-option v-for="item in rowData.fhxtreatyOptions"
                             :key="item.value"
                             :label="item.value + '-'+ item.label"
                             :value="item.value">
                  </el-option>
              </el-select>`,
    props:{
      rowData:{
        type:Object
      },
      field:{
        type:String
      },
      index:{
        type:Number
      },
    },
    methods:{
      select(){
        // 参数根据业务场景随意构造
        let params = {type:'selectFhxtreaty',index:this.index,rowData:this.rowData,tmpVal:this.rowData.fhxtreaty};
        this.$emit('on-custom-comp',params);
      },
    }
  })

  Vue.component('fhxlayer-select-view',{
    template:`<el-select v-model="rowData.fhxlayer" filterable size="small" @change="select" disabled>
                  <el-option v-for="item in rowData.fhxlayerOptions" :key="item.value" :label='item.value + (item.label !== null ? "-" + item.label : "")'
                             :value="item.value"></el-option>
                </el-select>`,
    props:{
      rowData:{
        type:Object
      },
      field:{
        type:String
      },
      index:{
        type:Number
      },
    },
    methods:{
      select(){
        // 参数根据业务场景随意构造
        let params = {type:'selectFhxlayer',index:this.index,rowData:this.rowData,tmpVal:this.rowData.fhxlayer};
        this.$emit('on-custom-comp',params);
      },
    }
  })
  Vue.component('fhxsection-select-view',{
    template:`<el-select v-model="rowData.fhxsection" filterable size="small" @change="select" disabled>
                  <el-option v-for="item in rowData.fhxsectionOptions" :key="item.value" :label="item.value + '-'+ item.label"
                             :value="item.value"></el-option>
                </el-select>`,
    props:{
      rowData:{
        type:Object
      },
      field:{
        type:String
      },
      index:{
        type:Number
      },
    },
    methods:{
      select(){
        // 参数根据业务场景随意构造
        let params = {type:'selectFhxsection',index:this.index,rowData:this.rowData,tmpVal:this.rowData.fhxsection};
        this.$emit('on-custom-comp',params);
      },
    }
  })

</script>
